<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
        <title></title>
        <script type='text/javascript'>
            
            var CTP_WEB_FULLPATH = '../../';
        </script>
        <link href="../../css/skins/standard/ctp-common.css" rel="stylesheet" type="text/css"/>
        <link href='../../css/validator.css' rel='stylesheet' type='text/css'/>
        <link href='../../css/borderlayout.css' rel='stylesheet' type='text/css'/>
        <link href='../../css/panel.css' rel='stylesheet' type='text/css'/>
        <link href='../../css/gridlayout.css' rel='stylesheet' type='text/css'/>
        <link href='../../css/rte.css' rel='stylesheet' type='text/css'/>
        <link href="../../css/messagebox.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/button.css" rel="stylesheet" type="text/css"/>
        <link href='../../css/colormenu.css' rel='stylesheet' type='text/css'/>
        <link href="../../css/groupbox.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/textfield.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/label.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/form.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/button.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/combobox.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/validator.css" rel="stylesheet" type="text/css"/>
		
		
        <script type='text/javascript' src='../../js/jquery/jquery.js'>
        </script>
        <script type='text/javascript' src='../../js/jquery/jquery-migrate.js'>
        </script>
        <script type='text/javascript' src='../../js/jqueryui/jquery-ui.js'>
        </script>
        <script type='text/javascript' src='../../js/ctp/public/jsextend.js'>
        </script>
		
        <script type='text/javascript' src='../../js/ctp/public/ctp.core.js'></script>
		<script type='text/javascript' src='../../js/ctp/public/ctp.base.js'></script>
		<script type='text/javascript' src='../../js/ctp/public/ctp.ui.component.js'></script>
		
        <script type='text/javascript' src='../../js/ctp/validator/ctp.validator-rules.js'>
        </script>
        <script type='text/javascript' src='../../js/ctp/validator/ctp.validator.js'>
        </script>
        <script type='text/javascript' src='../../js/ctp/borderlayout/ctp.ui.borderlayout.js'>
        </script>
        <script type='text/javascript' src='../../js/ctp/borderlayout/jquery.layout.js'>
        </script>
        <script type='text/javascript' src='../../js/ctp/panel/ctp.ui.panel.js'>
        </script>
        <script type="text/javascript" src="../../js/ctp/button/ctp.ui.button.js">
        </script>
        <script type='text/javascript' src='../../js/ctp/public/jquery.bgiframe.js'>
        </script>
        <script type='text/javascript' src='../../js/ctp/rte/ctp.ui.rte.js'>
        </script>
        <script type="text/javascript" src="../../js/ctp/groupbox/ctp.ui.groupbox.js">
        </script>
        <script type='text/javascript' src='../../js/ctp/gridlayout/ctp.ui.gridlayout.js'>
        </script>
		 <script type="text/javascript" src="../../js/ctp/textfield/ctp.ui.textfield.js">
        </script>
        <script type='text/javascript' src='../../js/ctp/colormenu/ctp.ui.colormenu.js'>
        </script>
        <script type="text/javascript" src="../../js/ctp/messagebox/ctp.ui.messagebox.js">
        </script>
		 <script type="text/javascript" src="../../js/ctp/label/ctp.ui.label.js">
        </script>
		<script type="text/javascript" src="../../js/ctp/form/ctp.form.js">
        </script>
		 <script type="text/javascript" src="../../js/ctp/button/ctp.ui.button.js">
        </script>
		<script type="text/javascript" src="../../js/ctp/combobox/ctp.ui.combobox.js">
        </script>
		<script type="text/javascript" src="../../js/ctp/validator/ctp.validator.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/validator/ctp.validator-rules.js">
        </script>	
        <script type='text/javascript' kind='variant'>
            
            var rte, buttonsLayout, buttonsGroupbox, panel2, showLayout;
        </script>
        <script type='text/javascript' kind='event'>
        </script>
        <script type='text/javascript' kind='ui'>
            
            $(document).ready(function(){
                var button1 = new ctp.ui.button({
                    id: 'button1',
                    text: '禁用按钮',
                    width: '100%',
                    onClick: function(){
                        rte.setDisable(true);
                    }
                });
                var button2 = new ctp.ui.button({
                    id: 'button2',
                    text: '启用按钮',
                    width: '100%',
                    onClick: function(){
                        rte.setDisable(false);
                    }
                });
                var button3 = new ctp.ui.button({
                    id: 'button3',
                    text: '获得HTML内容',
                    width: '100%',
                    onClick: function(){
                        ctpMSB.alert({
                            title: '信息提示',
                            message: "编辑内容:" + rte.getValue()
                        });
                        
                    }
                });
                var button4 = new ctp.ui.button({
                    id: 'button4',
                    text: '获得文本内容',
                    width: '100%',
                    onClick: function(){
                        ctpMSB.alert({
                            title: '信息提示',
                            message: "文本内容:" + rte.getText()
                        });
                        
                    }
                });
                var button5 = new ctp.ui.button({
                    id: 'button5',
                    text: '设置编辑内容',
                    width: '100%',
                    onClick: function(){
                        rte.setValue("测试输入内容<br>测试输入换行内容");
                    }
                });
                var button6 = new ctp.ui.button({
                    id: 'button6',
                    text: '清空内容',
                    width: '100%',
                    onClick: function(){
                        rte.clear();
                    }
                });
                 var button7 = new ctp.ui.button({
                    id: 'button7',
                    text: '销毁对象',
                    width: '100%',
                    onClick: function(){
                        rte.remove();
                    }
                });
                rte = new ctp.ui.rte({
                    id: 'rte',
                    value: '初始化内容'
                });
                showLayout = new ctp.ui.gridlayout({
                    id: 'showLayout',
                    width: '100%',
                    height: '160px',
                    cols: 1,
                    colSpace: 2,
                    items: [[{
                        element: rte
                    }]]
                });
                
                buttonsLayout = new ctp.ui.gridlayout({
                    id: 'buttonsLayout',
                    width: '98%',
                    cols: 3,
                    align: 'center',
                    colSpace: 30,
                    items: [[{
                        element: button1
                    }, {
                        element: button2
                    }, {
                        element: button3
                    }], [{
                        element: button4
                    }, {
                        element: button5
                    }, {
                        element: button6
                    }],[
                    	{element: button7
                    	}]]                
                });
                var showGroupbox = new ctp.ui.groupbox({
                    id: 'showGroupbox',
                    items: [showLayout],
                    title: '效果展示区'
                });
                buttonsGroupbox = new ctp.ui.groupbox({
                    id: 'buttonsGroupbox',
                    items: [buttonsLayout],
                    width: '100%',
                    title: '功能测试区'
                });
                panel2 = new ctp.ui.panel({
                    id: 'panel2',
                    title: 'rte组件',
                    width: '800px',
                    height: 'auto',
                    align: 'center',
                    items: [showGroupbox, buttonsGroupbox],
                    renderTo: 'body'
                });
                
            });
        </script>
    </head>
    <BODY>
        <b>ctp.ui.rte实例</b>
        <hr/>
        <br/>
    </BODY>
</html>
